@include('admin.header')

<style type="text/css">
  .opartion {
    width: 350px;
  }

  .pagination {
    list-style: none;
    float: right;
  }

  .pagination li {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
  }

  .input_search {
    margin-top: 10px;
  }

  .product_error,.total_error,.month_error,.verify_error {
    color: red;
  }

</style>

<div class="wrap">
  <div class="margin-bottom-20">
    <form action="" method="post">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="product_name">产品名称：</label>
            <input type="text" name="product_name" id="product_name" placeholder="请填写产品名称" style="width:400px" class="input-text input_search">
            <span class="product_error"></span>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20" name="product">
          <span class="text-c" name="product_list">
            
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="node_id">总金额：</label>
            <input type="number" name="total" id="total" placeholder="请填写总金额" style="width:400px" class="input-text input_search">
            <span class="total_error"></span>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="node_id">分红月份：</label>
            <input type="number" name="month" id="month" placeholder="请填写分红月份" style="width:400px" class="input-text input_search">
            <span class="month_error"></span>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <label for="verify_code">短信验证码：</label>
            <input type="text" name="verify_code" id="verify_code" placeholder="短信验证码" style="width:400px" class="input-text input_search" maxlength="6">
            <span class="verify_error"></span>
            <button name="verify_code" class="btn btn-success user_search" ><i class="Hui-iconfont"></i> <span name="send_verify">发送短信验证码</span></button>
          </span>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
          <span class="text-c">
            <button name="dividend" id="search" class="btn btn-success user_search"><i class="Hui-iconfont"></i> 分红</button>
          </span>
        </div>
    </form>
  </div>

  <script src="/static/admin/js/jquery.js"></script>
  <script type="text/javascript" src="/static/admin/js/layer/layer.js"></script>
  <script type="text/javascript" src="/static/admin/js/layer/dialog.js"></script>
  <script type="text/javascript">

  //分红
  $('button[name=dividend]').click(function() {
    //获取表单数据
    var product_id  = $('input[name=product_name]').attr('_id');
    var total       = $('input[name=total]').val();
    var month       = $('input[name=month]').val();
    var verify_code = $('input[name=verify_code]').val();
    
    //数据非空校验
    if(!check('product_name')) { //产品名称非空校验
      $('.product_error').text('产品名称不能为空');
      return false;
    }
    if(!check('total')) { //总金额非空检验
      $('.total_error').text('总金额不能为空');
      return false;
    }
    if(!check('month')) { //分红月份非空校验
      $('.month_error').text('分红月份不能为空');
      return false;
    }
    if(!check('verify_code')) { //验证码非空校验
      layer.msg('验证码不能为空');
      // $('.verify_error').text('验证码不能为空');
      return false;
    }
    if(verify_code.length != 6) { //验证码长度校验
      layer.msg('验证码不正确');
      // $('.verify_code').text('验证码不正确');
      return false;
    }

    //分红
    $.post(
      "{{url('dividend/dividend')}}",
      {'product_id':product_id,'total':total,'month':month,'verify_code':verify_code},
      function(data) {
        if(data == 1) {
          dialog.success('操作成功',"{{url('dividend/dividend')}}");
        }else if(data == 2) {
          dialog.error('信息填写不完整');
        }else if(data == 3) {
          dialog.error('分红月份填写有误');
        }else if(data == 4) {
          dialog.error('此产品未与用户绑定关系');
        }else if(data == 5) {
          layer.msg('验证码不正确');
        }else if(data == 6){
          dialog.error('绑定关系已失效');
        }else {
          dialog.error('操作失败');
        }
      }
    );
    return false;
  });

  //非空校验
  function check(attr_name) {
    if(!attr_name) {
      return false;
    }

    var attr_val = $('input[name='+attr_name+']').val();
    if(!attr_val || typeof(attr_val) == 'undefined') {
      return false;
    }else {
      return true;
    }
  }

  //产品名称非空校验
  $('input[name=product_name]').blur(function() { //失去焦点时
    if(!check('product_name')) {
      $('.product_error').text('产品名称不能为空');
    }else {
      $('.product_error').text('');
    }
  });
  
  $('input[name=product_name]').focus(function() { //得到焦点时
    $('span[name=product_list]').children().show();
    $('.product_error').text('');
  });

  //产品名称模糊搜索
  $('input[name=product_name]').keyup(function(event) {
    var product_name = $('input[name=product_name]').val();
      if(product_name) {
        setTimeout(function(){
          $.post(
            "{{url('dividend/get_product')}}",
            {'product_name':product_name},
            function(data) {
              if(data != 0) {
                $('span[name=product_list]').children().remove();
                for(var i=0; i<data.length; i++) {
                  $('span[name=product_list]').append('<span id="'+data[i].product_id+'" style="color:blue;cursor:pointer;display:block;padding:3px;" onclick="select_product('+data[i].product_id+',\''+data[i].product_name+'\''+');">'+data[i].product_name+'</span><br/>');
                }
              }
            },'JSON'
          );
        },200);
      }
  });

  function select_product(product_id,product_name)  {
    $('input[name=product_name]').val(product_name);
    $('input[name=product_name]').attr('_id',product_id);
    $('span[name=product_list]').children().hide();
  }

  //总金额非空校验
  $('input[name=total]').blur(function() { //失去焦点时
    if(!check('total')) {
      $('.total_error').text('总金额不能为空');
    }else {
      $('.total_error').text('');
    }
  });

  $('input[name=total]').focus(function() { //得到焦点时
    $('.total_error').text('');
  });

  //分红月份非空校验
  $('input[name=month]').blur(function() { //失去焦点时
    if(!check('month')) {
      $('.month_error').text('分红月份不能为空');
    }else {
      $('.month_error').text('');
    }
  });

  $('input[name=month]').focus(function() { //得到焦点时
    $('.month_error').text('');
  });

  //短信验证码倒计时
  $("button[name='verify_code']").click(function() {
    //清空错误提示信息和输入框内容
    $('.verify_error').text('');
    $('input[name=verify_code]').val('');
    $('input[name=verify_code]').focus();
    $(this).prop('disabled',true);

    //提示信息
    layer.msg('已发送短信验证码');

    //发送异步请求（短信验证码）
    $.post(
      "{{url('dividend/send_sms')}}",
      function(data) {
        console.log(data);
      }
    );

    var time_num = 60;
    var interval_id = window.setInterval(function() {
                        if(time_num <= 1) {
                          clearInterval(interval_id);
                          $("button[name='verify_code']").attr('disabled',false);
                          $("span[name='send_verify']").text('发送短信验证码');
                        }else {
                          $("span[name='send_verify']").text( (--time_num) +'秒后可重新获取短信验证码');
                        }
                      },1000);
  });

  </script>